<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <h3>{{ message }}</h3>
    <form id="upload-form" action="{{ url_for('upload') }}" method="POST" enctype="multipart/form-data">
        <strong>Files:</strong><br>
        <input id="file-picker" type="file" name="file" accept="video/*" multiple>
        <div id="msg"></div>
        <input type="submit" value="Upload!" id="upload-button">
    </form>
</body>
<script>
    $(document).ready(function(){
        $("#file-picker").change(function(){
            var input = document.getElementById('file-picker');
            for (var i=0; i<input.files.length; i++)
            {
                var ext= input.files[i].name.substring(input.files[i].name.lastIndexOf('.')+1).toLowerCase()
                if ((ext == 'mp4') || (ext == 'mov'))
                {
                    $("#msg").text("Files are supported")
                }
                else
                {
                    $("#msg").text("Files are NOT supported")
                    document.getElementById("file-picker").value ="";
                }
            }
        });
    });
</script>
</html>